<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="add">添加</el-button>
    <el-table
      :data="manage_Arr"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children'}"
    >
      <el-table-column prop="roleid" label="用户编号"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="rolename" label="所属角色"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-button type="primary" v-if="scope.row.status===1">启用</el-button>
          <el-button type="info" v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row.uid)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row.uid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="size" @current-change="changePage"></el-pagination>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { requserdelete,requsercount } from "../../http/api";
import {successAlert} from "../../utils/alert";
export default {
props: [],
computed: {
...mapGetters({
  manage_Arr:'manage_Arr'
})
},
data() {
  return {
    size:2,
    page:1,
    total:0
  }
},
activated() {
  this.set_manageArr({size:this.size,page:this.page});
  // 获取总页数
  requsercount().then(res=>{
    console.log(res);
    if(res.data.code===200){
      this.total=res.data.list[0].total
    }
  }).catch(err=>{
    console.log(err);
  })
},
methods: {
...mapActions({
  set_manageArr:'set_manageArr'
}),
changePage(num){
  this.page = num;
  // 重新请求数据
  this.reqList();
},
reqList(){
  this.set_manageArr({size:this.size,page:this.page});
  if(this.manage_Arr.length===0 && this.page!=1){
    this.page--;
    this.reqList();
    return
  }
},
add(){
  this.$router.push('/user/add');
},
edit(id){
  this.$router.push('/user/edit/'+id)
},
del(uid){
  this.$confirm("你确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //点了确定
          requserdelete({
            uid:uid
          }).then(res=>{
            if(res.data.code===200){
              //弹成功
              successAlert(res.data.msg)
              //重新请求列表
              this.$router.go(0);
            }
          })
        })
        .catch(() => {
          //点了取消
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
}
}
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
</style>